<template>


  <el-dropdown>
    <el-button class="editor-button-bar" title="超链接" type="info" plain icon="Link"></el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="addLink">添加链接</el-dropdown-item>
        <el-dropdown-item @click="removeLink">删除链接</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>

  <el-dialog v-model="dialogFormVisible" title="插入超链接" width="500">
    <el-form :model="form">
      <el-form-item label="链接URL" :label-width="formLabelWidth">
        <el-input v-model="form.url" autocomplete="off" />
      </el-form-item>
      <el-form-item label="类型" :label-width="formLabelWidth">
        <el-select v-model="form.type">
          <el-option label="当前页面" value="_self" />
          <el-option label="新页面" value="_blank" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="doAddLink()">
          插入
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { Editor } from "@tiptap/vue-3";
import { reactive, ref } from "vue";
const formLabelWidth = '80px'
const form = reactive({
  name: '',
  url: '',
  type: '_self'
})
const dialogFormVisible = ref(false)
const props = defineProps({
  editor: {
    type: Editor,
    required: true,
  }
});

const addLink = () => {
  dialogFormVisible.value = true;
  form.url = '';
}

const doAddLink = () => {

  props.editor
    .chain()
    .focus()
    .extendMarkRange('link')
    .setLink({ href: form.url, target: form.type })
    .run();
  dialogFormVisible.value = false;
}

const removeLink = () => {
  props.editor
    .chain()
    .focus()
    .unsetLink()
    .run()
}



</script>
<style scoped>
/* 样式可以根据需要添加 */
.editor-button-bar .el-button {
  width: 32px;
  height: 32px;
  margin: 1px;
}
.editor-button-bar .el-button {
  width: 32px;
  height: 32px;
  margin: 1px;
  border-color: #f4f4f5;
}

.editor-button-bar .el-dropdown {
  border: 0px solid #f4f4f5;
}

</style>
